import React from 'react'
import "./index.css"

//先把提供值的这个context对象引入
import { App1Context } from '../../App'
import { App2Context } from '../../App'

import { nanoid } from 'nanoid'
import { useContext } from 'react'


export default function Header() {
  //可以使用useContext Hook方法接受某个对象提供的数据
  const todoList = useContext(App1Context);
  const setTodoList = useContext(App2Context);


  //添加数据函数
  const publishHandle = (e) => {
    //判断按下的是不是回车
    if (e.keyCode !== 13) return;


    //获取输入的内容,判断是否输入为空
    const publishValue = e.target.value.trim();
    if (!publishValue) return alert("输入的内容不能为空")


    //创建新的todo对象
    const newTodo = { id: nanoid() , todo: publishValue , done: false};

    //把新的对象添加到todeList中
    setTodoList([...todoList , newTodo])

    //清空输入框
    e.target.value = ""

  }


  return (
    <div className="todo-header">
      <input type="text" onKeyUp={publishHandle} placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  )
}
